<template>
    <div class="ChartConfigs">
        <a-form-model-item :label="i18n('list.headAlign','标题对齐')"  :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.showName">
            <a-radio-group size="small" default-value="center" button-style="solid" v-model="config.advConfig.titleLeft">
                <a-radio-button value="left">{{i18n('list.left','左')}}</a-radio-button>
                <a-radio-button value="center">{{i18n('list.center','中')}}</a-radio-button>
                <a-radio-button value="right">{{i18n('list.right','右')}}</a-radio-button>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.showLegend','展示图例组件')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType!='gauge' && config.reportType!='funnel'">
            <a-switch size="small" default-checked v-model="config.advConfig.legendShow" />
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.legendLoca','图例组件位置')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.advConfig.legendShow">
            <a-radio-group size="small" default-value="top" button-style="solid" v-model="config.advConfig.legendTop">
                <a-radio-button value="top">{{i18n('list.up','上')}}</a-radio-button>
                <a-radio-button value="bottom">{{i18n('list.down','下')}}</a-radio-button>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.legendAlign','图例组件对齐')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.advConfig.legendShow">
            <a-radio-group size="small" default-value="left" button-style="solid" v-model="config.advConfig.legendLeft">
                <a-radio-button value="left">{{i18n('list.left','左')}}</a-radio-button>
                <a-radio-button value="center">{{i18n('list.center','中')}}</a-radio-button>
                <a-radio-button value="right">{{i18n('list.right','右')}}</a-radio-button>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.legendMetric','图例拼接度量')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.colorLegends.length>0 && this.config.measures.length<=1 && (config.reportType=='bar'||config.reportType=='line'||config.reportType=='radar')">
            <a-switch size="small" default-checked v-model="config.advConfig.joinMeasure" />
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.colWidth','柱形宽度')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType=='bar'">
            <a-input style="width: 425px" v-model="config.advConfig.barWidth"/>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.xColor','X轴颜色')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType=='bar'||config.reportType=='line'||config.reportType=='lineBar'">
            <a-input style="width: 60px;"  v-model="config.advConfig.xAxisColor" type="color" placeholder="X轴颜色"/>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.inRadius','半径(内)')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType=='pie'">
            <a-input style="width: 200px;"  v-model="config.advConfig.inside"/>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.outRadius','半径(外)')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType=='pie'">
            <a-input style="width: 200px;"   v-model="config.advConfig.outside"/>
        </a-form-model-item>

        <a-form-model-item :label="i18n('list.minScale','最小刻度')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType=='gauge'">
            <a-input  v-model="config.advConfig.min"/>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.maxScale','最大刻度')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType=='gauge'">
            <a-input  v-model="config.advConfig.max"/>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.textSize','文字大小')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType=='gauge'">
            <a-input  v-model="config.advConfig.fontSize"/>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.format','格式化')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType=='gauge' || config.reportType=='funnel'">
            <a-input  v-model="config.advConfig.formatter" style="width: 80%"/>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.smoothLine','平滑折线')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType=='line'">
            <a-switch size="small" v-model="config.advConfig.smooth" />
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.lineAndBar','折柱切换')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="config.reportType=='bar'|| config.reportType=='line'">
            <a-switch size="small" v-model="config.advConfig.magicType" />
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.resButton','还原按钮')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-switch  size="small" v-model="config.advConfig.restore" />
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.downButton','下载按钮')" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-switch size="small" v-model="config.advConfig.saveAsImage" />
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.sort','排序')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if=" config.reportType=='funnel'">
            <a-radio-group size="small" default-value="sort" button-style="solid" v-model="config.advConfig.sort">
                <a-radio-button value="descending">{{i18n('list.desOrder','降序')}}</a-radio-button>
                <a-radio-button value="ascending">{{i18n('list.ascOrder','升序')}}</a-radio-button>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :label="i18n('list.areaStyle','区域样式')" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if=" config.reportType=='radar'">
            <a-switch size="small" v-model="config.advConfig.areaStyle" />
        </a-form-model-item>
        <a-form-model-item label="滚动" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-switch size="small" default-checked v-model="config.advConfig.dataZoom" />
        </a-form-model-item>
        <template v-if="config.advConfig.dataZoom">
            <a-form-model-item label="最小数据条数" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-model="config.advConfig.dataZoomNumeral"/>
            </a-form-model-item>
            <a-row :gutter="24">
                <a-col :span="6">
                    <a-form-model-item :labelCol="{ span:22 }" label="X标轴" >
                        <a-switch size="small" default-checked v-model="config.advConfig.Xaxis" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="9">
                    <a-form-model-item :labelCol="labelCol1" label="开始" >
                        <a-input-number v-model="config.advConfig.Xstart"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="9">
                    <a-form-model-item label="结束" :labelCol="labelCol1">
                        <a-input-number  v-model="config.advConfig.Xend"/>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row :gutter="24">
                <a-col :span="6">
                    <a-form-model-item :labelCol="{ span:22 }" label="Y标轴" >
                        <a-switch size="small" default-checked v-model="config.advConfig.Yaxis" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="9">
                    <a-form-model-item :labelCol="labelCol1" label="开始" >
                        <a-input-number v-model="config.advConfig.Ystart"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="9">
                    <a-form-model-item label="结束" :labelCol="labelCol1">
                        <a-input-number  v-model="config.advConfig.Yend"/>
                    </a-form-model-item>
                </a-col>
            </a-row>
            <a-row v-if="config.advConfig.Xaxis" :gutter="24">
                <a-col :span="6">
                    <a-form-model-item :labelCol="{ span:22 }" label="缩放" >
                        <a-switch size="small" default-checked v-model="config.advConfig.inside" />
                    </a-form-model-item>
                </a-col>
                <a-col :span="9">
                    <a-form-model-item :labelCol="labelCol1" label="开始" >
                        <a-input-number v-model="config.advConfig.insideStart"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="9">
                    <a-form-model-item label="结束" :labelCol="labelCol1">
                        <a-input-number  v-model="config.advConfig.insideEnd"/>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </template>
    </div>
</template>

<script>
import {Dialog, GridMixin, Util} from "@lowcode/jpaas-common-lib";

export default {
    name: "ChartConfigs",
    mixins: [GridMixin],
    props:{
        chartConfig:{
            type:Object
        },
    },
    data() {
        return {
            config:{},
            labelCol: {span: 5},
            wrapperCol: {span: 19},
            labelCol1: { span:7 },
        }
    },
    created() {
        this.config=this.chartConfig;
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartComponent", key);
        },
    },
    watch:{
        config:{
            handler:function (val,oVal){
                this.$emit("setConfig",val);
            },
            deep:true
        }
    }
}
</script>

<style scoped>
.ChartConfigs>>>.ant-row{
    margin: 0px!important;
}
</style>